<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <title>个人主页</title>
     <style>
body{
    margin: 0;
    background-color:paleturquoise;
}
#banner{
            /*高默认由为文本高度*/
          height: 500px;
          /*设置背景图片*/
          background-image: url(111.jpg);
         background-position: 50% 50%;
        }
#school{
    /*width: 100%;
    margin: 0 auto;*/
    text-align: center;
    }
/*img标签如果不设置宽高，那么宽高等于所显示图片的宽高
如果只设置了宽度，那么高度也会等比缩放。如果设置了高度，
宽度也会等比缩放*/
.pic{
    /*宽度设置为100%，父类元素*/
  width: 50%;
  margin-left: 100px;
 }
 .pic1{
    /*margin-left:100px;*/
    width: 50%;
    margin: 0 auto;
}
p{
  text-align: center;
 text-indent: 2em;
}
/*.text{
    text-indent: 2em;
    text-align: center;
}*/
h1{
    text-align: center;
    color: purple;
}
 #jiaxiang{
  width: 100%;
  margin-top: 20px;
  text-align: center;

 }
#ouxiang{
/*margin-top: 20px;
 margin-left: 20px;*/
 text-align: center;
}
#friend{
    text-align: center;
}

/*.bg
{  margin-left: 200px;
    margin-top: 20px;
    width: 60%;
}*/
#background{
    height:750px; 
    background-image: url("22.jpg");
    background-size: 100% 100%;
    position: relative;
}
.photo{
   position: absolute;
   width: 350px;
   height: 350px;
   border: 5px solid white;
   border-radius: 50%;
}
#f1{
 left: 80px;
 top: 40px;

}
#f2{
left: 800px;
bottom: 100px;
}
#f3{
top:40px;
right:100px;
}
#nav{
    width: 100%;
    background-color: paleturquoise;
    position: fixed;
}
#nav-inner{
  text-align: right;
  /*margin: 0 auto;
  width: 800px;*/
 height: 80px;
 line-height: 80px;
}
#nav-inner a{
   text-decoration: none;
   font-size: 18px;
   color:blue;
   /*display: inline-block;
   height: 10px;*/
}
 #nav-inner a:hover{
  color:red;   
}
</style>
</head>
<body>
  <div id="nav">
      <div id="nav-inner">
         <a href="#school">我的学校</a>
         <a href="#jiaxiang">我的家乡</a>
         <a href="#ouxiang">我的偶像</a>
         <a href="#friend">我的朋友</a>
  </div>
    </div>
<div id="banner"></div>
<div id="school">
    <h1>我的个人资料</h1>
    <hr>
    <h2>我的学校</h2>
      <p class="text">郑州铁路职业技术学院，位于郑州市中牟县前程路与郑开大道交叉口。郑州作为一个有铁路渊源的城市，交通四通八达。该学校以半军事化化管理理念，旨在培养一批技术型高新人才。学校标志型建筑以火车为主，以其良好的就业前景吸引了很多学生，另外学校的绿化和风景相对于老校区要好好多，在新校区扩建以后，基础设施不断完善，教育教学环境不断改善，校企合作的办学模式更是为学生的就业奠定了深厚的基础。图书馆是一个大学的心脏，因部分原因图书管未能修建完备。学风浓厚，学生自律能力强</p>
      <img class="pic" src="44.jpg" >
    <hr>
</div>
  <div id="jiaxiang">
       <h2>我的家乡</h2>
       <p class="text">我的家乡在风景优美的登封，少林寺，嵩山，中岳庙，观星台，情人谷，八龙潭和九龙潭，庐崖瀑布最为出名。登封市位于河南省中西部，中岳 嵩山南麓。市境东西长56千米，南北宽35.5千米，总面积1220平方千米；登封市辖3个街道、8个镇、4个乡、1个工业区和1个矿区，总人口65万人（2013年），有24个民族。其自然环境和农场植被保护完好。</p>
       <img class="pic" src="02.jpg" >
       <hr>
  </div>
  <div id="ouxiang">
      <h2>我的偶像</h2>
      <p class="text">
          我的偶像是陈翔，从高中就很喜欢，他和EASON一样都是积极向上，阳光的男孩。为了梦想一步一步的奋斗，曾经在未出道时，去参加快乐男生的比赛，途中在干渴难熬之下，还是旁边的陌生人递给了他一杯水，就是在这样的情况下一步一步的走到了现在。从来不是因为一个人的光鲜而喜欢上一个人，而是他身上的品质和精神，因为感动因为温暖，因为从未放弃的执着，这些也正是自己所追寻的，希望成为像他一样的人。陈翔，1989年12月13日出生于甘肃天水，中国内地歌手、演员。2010年，参加快乐男声，最终取得了全国5强的成绩。2011年10月，推出首张全原创唱片《初告白》。2012年3月，出演《秘密天使》；6月，出演《裸爱》。2013年2月1日，首本个人图文传记《梦翔家》出版；2月17日，他主演的《落跑甜心》播出；3月，他出演《步步惊情》；6月，出演《淑女之家》；9月，出演《新神雕侠侣》；10月，主演电影《热血男人帮》；同年，首次担任唱片制作人，制作了个人第二张唱片《漂》，荣获2013年度星外星内地流行唱片销售冠军。2014年9月，出演《美人制造》，2015年1月29日，主演的电影《热血男人帮》在中国大陆上映；2015年2月，主演作品《相爱穿梭千年》热播；7月，主演作品《旋风少女》播出。2016年1月，主演的电视剧《寻找爱的冒险》播出。
      </p>
    <img class="pic1" src="0.jpg" >
    <hr>
    </div>
   <div id="friend">
       <h2>我的朋友</h2>
       <p class="text">
         身边朋友不算太多，但是都是交心的，不管是一路陪着我的一块疯一块
         闹无话不说的学姐，还是那群乖巧懂事的小学弟，小学妹，以及那群讲义气
         一块奋斗的航拍社的那群朋友，以及天天在一块的文佳和热闹的415我们小窝的
         室友，还有那个天天不嫌我烦，一直帮我的师傅，还有以前关系非常非常好的学长，
         和带着的一群傻傻的IT工匠社的社员，这一路走来，走走停停，感谢
        身边的人在不断的离去，也在不断的更新，感谢一路上他们的陪伴，
        让我的生活更加多彩！
        </p>
          <div id="background">
          <img class="photo" id="f1" src="11.jpg" >
          <img class="photo" id="f2" src="2.jpg" >
          <img class="photo" id="f3" src="1.jpg" >
      
      </div>

 
  </div>
</body>
</html>